<?php

namespace LowCode\Traits\Props;

use LowCode\Support\JsBind;
use LowCode\Support\JsExp;

/**
 * 设置固定Affix组件的方法
 */
trait HasAffix
{
    use HasPosition;

    /**
     * 在触发顶部固定后 Affix 的 CSS top 属性（如果没设定，会使用 trigger-top 代替)
     * @param int|JsExp $top
     * @return $this
     */
    public function top(int|JsExp $top): static
    {
        return $this->prop('top', $top);
    }

    /**
     * 在触发底部固定后 Affix 的 CSS bottom 属性（如果没设定，会使用 trigger-bottom 代替)
     * @param int|JsExp $bottom
     * @return $this
     */
    public function bottom(int|JsExp $bottom): static
    {
        return $this->prop('bottom', $bottom);
    }

    /**
     * 需要监听滚动的元素
     * @param string|JsBind $listenTo string | HTMLElement | Document | Window | (() => HTMLElement)
     * @return $this
     */
    public function listenTo(string|JsBind $listenTo): static
    {
        return $this->prop('listen-to', $listenTo);
    }

    /**
     * 触发顶部固定时，Affix 和目标元素元素的顶部距离（如果没设定，会使用 top 代替
     * @param int|JsExp $triggerTop
     * @return $this
     */
    public function triggerTop(int|JsExp $triggerTop): static
    {
        return $this->prop('trigger-top', $triggerTop);
    }

    /**
     * 触发底部固定时，Affix 和目标元素元素的底部距离（如果没设定，会使用 bottom 代替)
     * @param int|JsExp $triggerBottom
     * @return $this
     */
    public function triggerBottom(int|JsExp $triggerBottom): static
    {
        return $this->prop('trigger-bottom', $triggerBottom);
    }
}
